/*
 *  用于村成员概率和首页的echart部分
 */

import Vue from "vue";
import Component from "vue-class-component";
import echarts from "echarts";
import dayjs from 'dayjs';
import { merge } from "@/utils";
interface UnknownData{
    [propsName: string]: any;
}
interface Form{
    createTime: any[];
}
@Component
export default class EchartsMixin extends Vue {
    activeName ='1' // 时间tabs的默认值

    form: Form = {
        createTime: [new Date(), new Date()]
    }

    // e-chart的初始化
    // ref - 绑定得dom  option - echart不变参数   optionChange - 会改变参数 callback - 初始化后的操作
    setEcharts(ref: string, option: UnknownData, optionChange: UnknownData, callback?: any): void{
        const category: any = this.$refs[ref];
        if (category) {
            const chart = echarts.init(category);
            const resize = () => {
                this.$nextTick(() => {
                    chart.resize();
                });
            };
            chart.setOption(merge(true, option, optionChange), true);
            if (callback) {
                callback(chart);
            }
            resize();
            window.addEventListener("resize", resize);
            this.$on('hook:beforeDestroy', () => {
                window.removeEventListener("resize", resize);
            });
        }
    }

    handleTabClick() {
        let start = '';
        let end = '';
        const tabs: number = +this.activeName;
        switch (tabs) {
        case 1: // 今天

            start = dayjs().startOf('day').format();
            end = dayjs().endOf('day').format();

            break;
        case 2: // 昨天

            start = dayjs().subtract(1, 'day').startOf('day').format();
            end = dayjs().subtract(1, 'day').endOf('day').format();


            break;
        case 3: // 最近一周

            start = dayjs().subtract(6, 'day').startOf('day').format();
            end = dayjs().endOf('day').format();
            break;
        case 4: // 最近一个月

            start = dayjs().subtract(29, 'day').startOf('day').format();
            end = dayjs().endOf('day').format();
            break;
        default:
        }

        this.$set(this.form, 'createTime', [start, end]);
        this.handleTabClickExtend();
    }

    // 时间改变后的后续操作
    handleTabClickExtend(): void {
        //
    }
}
